<template>
    <div class="login-register">
        <div class="canvas-wrapper">
            <div class="video-wrapper">
                <video src="../../assets/video/BadApple.mp4" id="login-video" ref="loginVideo" muted autoplay
                    loop></video>
            </div>
        </div>
        <div class="login-register-container">
            <el-tabs stretch class="login-tabs" @tab-click="handleClick">
                <el-tab-pane label="登录" lazy>
                    <div class="login-box">
                        <el-input type="text" class="input" v-model="usernameLogin" placeholder="请输入账号" />
                        <el-input type="password" show-password class="input" v-model="passwordLogin"
                            placeholder="请输入密码" />
                        <div class="submit" @click="submitLogin">登&nbsp;录</div>
                        <div class="tips">登录即代表你同意我们的<span class="agreement">用户协议</span></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="注册" lazy>
                    <div class="register-box">
                        <el-input type="text" class="input" v-model="usernameRegister" placeholder="请输入账号"
                            maxlength="50" />
                        <el-input type="password" show-password class="input" v-model="passwordRegister"
                            placeholder="请输入密码" />
                        <el-input type="password" show-password class="input" v-model="confirmedPassword"
                            placeholder="再次确认密码" />
                        <div class="submit" @click="submitRegister">注&nbsp;册</div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useStore } from 'vuex';
import { login, getUserById, register } from '@/api/user.js'
import { setToken, setCurrentUser } from '@/utils/auth.js';

const emit = defineEmits(["loginSuccess"]);

const store = useStore();
// const videoElement = ref(null);
const usernameLogin = ref("");
const passwordLogin = ref("");
const usernameRegister = ref("");
const passwordRegister = ref("");
const confirmedPassword = ref("");
const type = ref(1);  // 1登录 2注册

const loginVideo = ref(null); // 声明一个ref，并初始化为null

// 定义播放视频的函数
const playVideo = () => {
    const videoElement = loginVideo.value; // 获取video元素
    if (videoElement) {
        videoElement.play(); // 播放视频
    }
};

onMounted(() => {
    // videoElement.value = loginVideo.value;
    playVideo();
    document.addEventListener('keydown', handleKeyboard);
});

onBeforeUnmount(() => {
    document.removeEventListener('keydown', handleKeyboard);
});

// 点击标签页触发的事件
const handleClick = (tab) => {
    if (tab.props.label === '登录') {
        type.value = 1;
    } else {
        type.value = 2;
    }
}

// 监听键盘回车触发登录
const handleKeyboard = (event) => {
    if (event.keyCode === 13 && type.value === 1) {
        submitLogin();
    }
}

// 登录
const submitLogin = () => {
    // console.log("登录");
    if (usernameLogin.value.trim() == "") {
        ElMessage.error("请输入账号");
        return;
    }
    if (passwordLogin.value == "") {
        ElMessage.error("请输入密码");
        return;
    }
    login(usernameLogin.value, passwordLogin.value).then(res => {
        if (res.code == 1) {
            // console.log("打印" + JSON.stringify(JSON.stringify(res)));
            setToken(res.data.token) // 浏览器缓存token
            store.commit("updateUser", res.data.user); // 更新pinia中当前用户信息
            store.commit("updateIsLogin", true);
            setCurrentUser(res.data.user);
            ElMessage.success("登录成功");
            emit('loginSuccess');
        }
    });
    // let user = { "uid": 1, "vip": 1, "nickname": "刘哈哈", "avatar_url": "../../assets/img/3.jpg", "gender": 0, "coin": 516, "followsCount": 2, "fansCount": 1000000, 'state': 1 };
    // localStorage.setItem("token", result.data.data.token); 
    // store.commit("updateUser", result.data.data.user);    // 更新vuex中当前用户信息
    // store.commit("updateUser", user);
    // store.commit("updateIsLogin", true);
    // ElMessage.success("登录成功");
    // emit('loginSuccess');
}

// 注册
const submitRegister = () => {
    console.log("注册");
    if (usernameRegister.value.trim() == "") {
        ElMessage.error("账号不能为空");
        return;
    }
    if (passwordRegister.value == "" || confirmedPassword.value == "") {
        ElMessage.error("密码不能为空");
        return;
    }
    if (passwordRegister.value != confirmedPassword.value) {
        ElMessage.error("两次输入的密码不一致");
        return;
    }
    const formData = new FormData();
    formData.append("username", usernameRegister.value);
    formData.append("password", passwordRegister.value);
    register(formData).then(res => {
        // console.log("打印" + JSON.stringify(res));
        if (res.code == 1) {
            ElMessage.success("注册成功");
            usernameRegister.value = "";
            passwordRegister.value = "";
            confirmedPassword.value = "";
        }
    });
}



</script>

<style scoped>
.login-register {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
}

.canvas-wrapper {
    position: relative;
    width: 360px;
    height: 360px;
}

.video-wrapper {
    /* visibility: hidden; */
    position: absolute;
    width: 360px;
    height: 360px;
}

.video-wrapper video {
    object-fit: fill;
    display: block;
}

#cvs {
    visibility: hidden;
    position: absolute;
}

#cvs2 {
    position: absolute;
    top: 4px;
    left: 5px;
}

.login-register-container {
    display: block;
    width: 360px;
    height: 360px;
    padding: 30px 40px;
}

.login-tabs {
    width: 80%;
    margin: 0 auto;
}

.login-box,
.register-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-box .input,
.login-box .submit,
.login-box .tips {
    margin-top: 30px;
    width: 100%;
}

.register-box .input,
.register-box .submit,
.register-box .tips {
    margin-top: 20px;
    width: 100%;
}

.submit {
    color: #fff;
    border-radius: 4px;
    background-color: var(--brand_pink);
    text-align: center;
    padding: 10px 15px;
    cursor: pointer;
}

.submit:hover {
    background-color: #f992af;
}

.tips {
    color: var(--text2);
    font-size: 12px;
    text-align: center;
}

.tips .agreement {
    color: var(--brand_blue);
    margin-left: 4px;
    cursor: pointer;
}

/* element 元素 */
.el-input {
    --el-input-focus-border: #ccc;
    --el-input-focus-border-color: #ccc;
    --el-input-border-radius: 10px;
    --el-input-height: 40px;
}

.el-input :deep() .el-input__inner {
    padding: 8px 15px;
}

.el-input :deep() .el-input__icon {
    margin-right: 8px;
}

.login-register-container :deep() .el-tabs__active-bar {
    height: 3px;
}

.login-register-container :deep() .el-tabs__nav-wrap::after {
    height: 0;
}

.login-register-container :deep() .el-tabs__item {
    font-size: 17px;
}
</style>